<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<%@ include file="header.jsp"%>
</head>
<body>
	<form class="layui-form" action="" id="formId">
  		<div class="layui-form-item">
			<label class="layui-form-label">用户名</label>
    		<div class="layui-input-block" style="margin-right: 40px;">
      			<input type="text" name="name" lay-verify="title" autocomplete="off" placeholder="请输入姓名" class="layui-input">
    		</div>
  		</div>
  		<div class="layui-form-item">
			<label class="layui-form-label">密码</label>
    		<div class="layui-input-block" style="margin-right: 40px;">
      			<input type="text" name="password" lay-verify="title" autocomplete="off" placeholder="请输入密码" class="layui-input">
    		</div>
  		</div>
  		<div class="layui-form-item">
			<label class="layui-form-label">年龄</label>
    		<div class="layui-input-block" style="margin-right: 40px;">
      			<input type="text" name="age" lay-verify="title" autocomplete="off" placeholder="请输入年龄" class="layui-input">
    		</div>
  		</div>
  		<div class="layui-form-item">
			<label class="layui-form-label">邮箱</label>
    		<div class="layui-input-block" style="margin-right: 40px;">
      			<input type="text" name="email" lay-verify="title" autocomplete="off" placeholder="请输入邮箱" class="layui-input">
    		</div>
  		</div>
  		<div class="layui-form-item">
    		<div class="layui-inline">
				<label class="layui-form-label">部门</label>
				<div class="layui-input-inline" style="margin-left: 30px;">
        			<select name="departmentId">
          				<option value="">请选择部门</option>
         			<c:forEach items="${requestScope.departmentList}" var="list">
         				<option value="${list.id}">${list.name}</option>
         			</c:forEach>
        			</select>
      			</div>
    		</div>
  		</div>
  		<div class="layui-form-item">
    		<label class="layui-form-label">职位</label>
    		<div class="layui-input-block">
    		<c:forEach items="${requestScope.roleList}" var="listR">
    			<input type="checkbox" name="roleId" value="${listR.id}" title="${listR.name}">
    		</c:forEach>
    		</div>
  		</div>
  		<div class="layui-form-item">
	   		<input type="button" class="layui-btn" onclick="submitForm()" style="margin-left: 30px;" value="立即添加"/>
	  	</div>
  	</form>

	<script type="text/javascript">
		layui.use('form', function(){
			var form = layui.form; //只有执行了这一步，部分表单元素才会自动修饰成功
		  //但是，如果你的HTML是动态生成的，自动渲染就会失效
		  //因此你需要在相应的地方，执行下述方法来进行渲染
			form.render();
		}); 
		function submitForm(){
			$.post(
				'${path}/users/insert.action',
				$('#formId').serialize(),
				function(jsonObj){
					if (jsonObj.code == 0) {
						mylayer.successMsg(jsonObj.msg);
		                var index = layer.getFrameIndex(window.name);
	                    setTimeout(function() {
	                        layer.close(index);
	                        window.parent.location.reload();
	                    }, 1000);
					} else {
						mylayer.errorMsg(jsonObj.msg);
					}
				},
				'json'
			);
		}
	</script>
</body>
</html>